<!-- 登陆 -->
<template>
    <div id="login">
    <!-- <img style="width:100%" src="../../static/images/login/loginLogo.png" /> -->
    <div class="top">
      <div class="logo_wrap" style="overflow:hidden;padding:0.1rem;">
          <img style="width:100%;" src="../../static/images/login/logo.jpg"/>
      </div>
      <p>{{name}}</p>
    </div>
    <form style="margin-top:1rem;padding:0 0.9rem;margin-bottom:0.62rem">
      <!-- <div class="fomrGroup" @click="selectUseType()">
        <img src="../../static/images/login/user.jpg">
        <mt-field readonly="true" placeholder="请选择用户类型" v-model="username">
         
        </mt-field>
        <img class="more" src="../../static/images/login/more.png"/>
      </div> -->
      <div class="fomrGroup">
        <img src="../../static/images/login/phone.jpg">
        <mt-field class="input" placeholder="请输入手机号" type="phone"  v-model="phone"></mt-field>
      </div>
      <div class="fomrGroup">
        <img src="../../static/images/login/password.jpg">
        <mt-field class="input" placeholder="请输入密码" type="password" v-model="password"></mt-field>
      </div>

    </form>
    <div style="display:flex;justify-content:center">
      <mt-button type="primary" @click='login' size="large" style="margin:0 0.625rem">登录</mt-button>
    </div>
    <!-- <mt-popup class="useTypePopup"
    v-model="popupVisible"
    position="center">
    <mt-radio
      title="radio list"
      v-model="value"
      :options="['optionA', 'optionB', 'optionC']">
    </mt-radio>
    </mt-popup>  -->
  </div>
</template>
<script>
    export default {
        data() {
            return {
                name: '华文课后服务中心信息系统',
                phone: '',
                password: '',
                popupVisible: 0,
                state: '',
            }
        },
        methods: {

            login() { //登录
                if (!this.$check.phone(this.phone)) {
                    return;
                };
                if (!this.$check.password(this.password)) {
                    return;
                };
                let params = {
                        phone: this.phone,
                        password: this.password,
                        userType: '1',
                        cid: '',
                    },
                    that = this;
                if (window.plus) {
                    var info = plus.push.getClientInfo();
                    params.cid = info.clientid;
                    params.token = info.token;
                    params.appid = info.appid;
                    params.appkey = info.appkey;
                }

                this.$api.post('/login/findUserInfo', params, function(data) {
                    if (data.info.studentList[0]) {
                        data.info.studentList[0].checked = true;
                    }
                    sessionStorage.setItem('useInfo', JSON.stringify(data.info));
                    localStorage.setItem('useParams', JSON.stringify(params));
                    that.$router.push({
                        'path': '/dongtai'
                    })
                })
            },
            selectUseType() {
                this.popupVisible = 1;
            },
            getUserParams() {
                var params = JSON.parse(localStorage.getItem('useParams'));
                if (params) {
                    this.phone = params.phone;
                    this.password = params.password;
                }
            }
        },
        created() {
            this.getUserParams();
        }
    }
</script>
<style scoped>
    .input {
        border: none;
        outline: none;
        height: 0.7rem;
        margin-left: 0.15rem;
    }
    
    .top {
        background-image: url('../../static/images/login/head-bg.jpg');
        height: 7.3rem;
        width: 100%;
        background-size: 100% 100%;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .top .logo_wrap {
        width: 2rem;
        height: 2rem;
        background: white;
        border-radius: 50%;
        margin-bottom: 0.3rem;
    }
    
    .top p {
        color: white;
        font-size: 0.5rem;
    }
    
    .fomrGroup {
        display: flex;
        display: -webkit-flex;
        margin-bottom: .1rem;
        align-items: center;
        position: relative;
    }
    
    .fomrGroup img {
        width: 0.45rem;
    }
    
    .fomrGroup .more {
        width: 0.2rem;
        position: absolute;
        right: 0.24rem;
        top: 0.45rem;
    }
    
    .useTypePopup {
        width: 7.6rem;
        height: 8rem;
    }
    
    .input {
        border: none;
    }
</style>